<template>
	<scroll-view class="j-cart-list" scroll-y>
		<!-- 购物车为空时显示 -->
		<view class="empty-cart" v-if="cartList.length === 0">
			<view class="empty-icon">🛒</view>
			<text class="empty-text">购物车空空如也</text>
			<view class="empty-btn" @click="handleGoShopping">去逛逛</view>
		</view>

		<!-- 商品列表 -->
		<view class="cart-item" v-for="(item, index) in cartList" :key="item.id">
			<!-- 商品图片 -->
			<view class="item-image">
				<image :src="item.image" mode="aspectFill" @error="handleImageError" :lazy-load="true"></image>
			</view>

			<!-- 商品信息 -->
			<view class="item-info">
				<!-- 商品标题 -->
				<text class="item-title">{{ item.title }}</text>

				<!-- 删除商品按钮 -->
				<view class="delete-btn" @click="handleDeleteItem(item, index)">
					<uv-icon name="trash" color="#fa436a" size="40rpx"></uv-icon>
				</view>

				<!-- 商品标签 -->
				<view class="item-tags">
					<text class="tag" v-if="item.stock">库存:{{ item.stock }}</text>
					<text class="tag" v-if="item.minOrder">起订:{{ item.minOrder }}</text>
					<text class="tag" v-if="item.multiplier">倍数:{{ item.multiplier }}</text>
					<text class="tag" v-if="item.limit">限购:{{ item.limit }}</text>
				</view>

				<!-- 商品规格 -->
				<text class="item-spec">{{ item.spec }}</text>

				<!-- 价格与步进器同一行 -->
				<view class="item-bottom">
					<text class="item-price">¥{{ item.price }}</text>
					<view class="quantity-controls">
						<JNumberBox
							:value="item.quantity"
							:min="item.minOrder || 1"
							:max="computeNumberMax(item)"
							:step="item.multiplier || 1"
							:disabled="false"
							size="normal"
							color="#246ef9"
							@change="(value) => handleQuantityChange(index, value)"
							@delete="handleDeleteItem(item, index)"
						></JNumberBox>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
export default {
	name: 'JCartList',
	props: {
		// 购物车商品列表
		cartList: {
			type: Array,
			default: () => []
		},
		// 是否显示空状态
		showEmpty: {
			type: Boolean,
			default: true
		},
		// 空状态文字
		emptyText: {
			type: String,
			default: '购物车空空如也'
		},
		// 空状态按钮文字
		emptyBtnText: {
			type: String,
			default: '去逛逛'
		}
	},
	computed: {
		// 是否显示空状态
		computeNumberMax() {
			return (item) => {
				if (item.limit) {
					return Math.min(item.stock, item.limit);
				} else {
					return item.stock;
				}
			};
		}
	},
	methods: {
		// 增加数量
		handleIncreaseQuantity(index) {
			const item = this.cartList[index];
			if (item.limit && item.quantity >= item.limit) return;

			// 创建新的商品对象，避免直接修改props
			const newItem = { ...item, quantity: item.quantity + 1 };
			this.$emit('update-item', index, newItem);
		},

		// 减少数量
		handleDecreaseQuantity(index) {
			const item = this.cartList[index];
			if (item.quantity <= (item.minOrder || 1)) return;

			// 创建新的商品对象，避免直接修改props
			const newItem = { ...item, quantity: item.quantity - 1 };
			this.$emit('update-item', index, newItem);
		},

		// 删除商品
		handleDeleteItem(index) {
			this.$emit('delete-item', index);
		},

		// 去逛逛
		handleGoShopping() {
			this.$emit('go-shopping');
		},

		// 图片加载失败处理
		handleImageError(e) {
			console.log('图片加载失败:', e);
			// 可以设置默认图片
			// e.target.src = '/static/images/default-product.png';
		},

		// 数量变化处理
		handleQuantityChange(index, newQuantity) {
			console.log(123);
			const item = this.cartList[index];
			const newItem = { ...item, quantity: newQuantity };
			this.$emit('update-item', index, newItem);
		}
	}
};
</script>

<style lang="less" scoped>
.j-cart-list {
	flex: 1;
	background: #fff;

	.empty-cart {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 40rpx;

		.empty-icon {
			font-size: 120rpx;
			margin-bottom: 30rpx;
			opacity: 0.6;
		}

		.empty-text {
			font-size: 32rpx;
			color: #999;
			margin-bottom: 40rpx;
		}

		.empty-btn {
			padding: 20rpx 60rpx;
			background: #246ef9;
			color: #fff;
			border-radius: 8rpx;
			font-size: 28rpx;
		}
	}

	.cart-item {
		display: flex;
		padding: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;

		.item-image {
			width: 200rpx;
			height: 200rpx;
			margin-right: 20rpx;
			border-radius: 8rpx;
			overflow: hidden;
			background: #f5f5f5;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
		}

		.item-info {
			flex: 1;
			position: relative;
			.delete-btn {
				position: absolute;
				top: 0;
				right: 0;
				width: 40rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.item-title {
				padding-right: 50rpx;
				font-size: 28rpx;
				color: #333;
				line-height: 1.4;
				margin-bottom: 15rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				overflow: hidden;
			}

			.item-tags {
				display: flex;
				flex-wrap: wrap;
				gap: 10rpx;
				margin-bottom: 8rpx;
				.tag {
					background: #f0f4ff;
					color: #246ef9;
					border: 1rpx solid #b3c6ff;
					padding: 4rpx 12rpx;
					border-radius: 4rpx;
					font-size: 20rpx;
				}
			}

			.item-spec {
				font-size: 24rpx;
				color: #666;
				margin-bottom: 15rpx;
			}

			.item-bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 20rpx;
				margin: 10rpx 0 0;

				.item-price {
					font-size: 32rpx;
					color: #fa436a;
					font-weight: bold;
				}
			}

			.quantity-controls {
				display: flex;
				align-items: center;
			}
		}
	}
}
</style>
